<template>
  <div class="hello">
    <!-- 表格导出 -->
    <el-table :data="tableData" id="myTable" border style="width: 50%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-button type="success" icon="el-icon-download" @click="exportExcel"
      >导出表格</el-button
    >
  </div>
</template>
 
<script>
// 引入xlsx插件
import * as XLSX from "xlsx";
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    exportExcel() {
      //方式一：XLSX.utils.table_to_sheet接受一个表格 DOM 元素并返回一个类似于输入表格的工作表
      //1.创建空工作簿
      var workbook = XLSX.utils.book_new();
      let tableDom = document.getElementById("myTable").cloneNode(true);
      // tableDom.removeChild(tableDom.querySelector('.el-table__fixed'))
      //  将 DOM TABLE 元素转换为工作表
      try {
        let ws = XLSX.utils.table_to_sheet(tableDom);
        //3.将工作表附加到工作薄
        //table_to_sheet(参数:table元素（dom）) 将table元素转换成 sheet
        XLSX.utils.book_append_sheet(workbook, ws, "Sheet1");
        //打印工作薄
        console.log(workbook);
        // 4.尝试写入wb到filename。在基于浏览器的环境中，它将尝试强制客户端下载。
        XLSX.writeFile(workbook, "表格名字.xlsx", {
          bookType: "xlsx",
          type: "array",
        });
      } catch (e) {
        this.$message.error("导出失败");
      }
      // 方式二：XLSX.utils.table_to_book 根据工作表生成一个最小的工作簿。
      /* cloneNode() 方法可创建指定的节点的精确拷贝。
        cloneNode() 方法 拷贝所有属性和值。
        该方法将复制并返回调用它的节点的副本。
        如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。
        否则（也就是默认值，或者false），它只复制当前节点。 */
      /* let tableDom = document.getElementById("myTable").cloneNode(true);
      try {
        //table_to_book(参数:table元素（dom）) 将table元素转换成 book
        let tableWb = XLSX.utils.table_to_book(tableDom);
        // 4.尝试写入wb到filename。在基于浏览器的环境中，它将尝试强制客户端下载。
        // XLSX.writeFile传递三个参数:1.要写入的表格 也就是上面这个声明的变量名,2:导出的表格名称"table.xlsx"，第三个参数:导出的数据类型:'array',文件格式:'xlsx'
        XLSX.writeFile(tableWb, "table.xlsx", {
          bookType: "xlsx",
          type: "array",
        });
      } catch (e) {
        this.$message.error("导出失败");
      } */
    },
  },
};
</script>
<style></style>